<template>
  <div class="mobile-shop-container">
    <!-- 顶部导航栏 -->
    <div class="shop-header">
      <div class="header-content">
        <div class="logo">
          <i class="el-icon-mobile-phone"></i>
          <span>手机商城</span>
        </div>
        <div class="search-box">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索手机型号、品牌"
            prefix-icon="el-icon-search"
            @keyup.enter.native="handleSearch"
            clearable
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="handleSearch"
            ></el-button>
          </el-input>
        </div>
        <div class="user-actions">
          <el-button
            type="text"
            icon="el-icon-shopping-cart-2"
            @click="showCart"
          >
            购物车 <el-badge :value="cartCount" class="cart-badge"></el-badge>
          </el-button>
          <el-button type="text" icon="el-icon-user" @click="showUserCenter">
            个人中心
          </el-button>
        </div>
      </div>
    </div>

    <!-- 广告轮播图 -->
    <div class="advertisement-section">
      <el-carousel height="200px" indicator-position="outside" arrow="hover">
        <el-carousel-item v-for="(ad, index) in advertisements" :key="index">
          <div class="ad-item" @click="handleAdClick(ad)">
            <img :src="ad.imageUrl" :alt="ad.name" />
            <div class="ad-overlay">
              <h3>{{ ad.name }}</h3>
              <p>{{ ad.description }}</p>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 商品分类 -->
    <div class="category-section">
      <div class="section-title">
        <h2>商品分类</h2>
      </div>
      <div class="category-grid">
        <div
          v-for="category in categories"
          :key="category.id"
          class="category-item"
          @click="selectCategory(category)"
        >
          <div class="category-icon">
            <i :class="category.icon"></i>
          </div>
          <div class="category-name">{{ category.name }}</div>
        </div>
      </div>
    </div>

    <!-- 热门商品 -->
    <div class="hot-products-section">
      <div class="section-title">
        <h2>热门商品</h2>
        <el-button type="text" @click="viewMore">查看更多</el-button>
      </div>
      <div class="products-grid">
        <div
          v-for="product in hotProducts"
          :key="product.id"
          class="product-card"
          @click="viewProduct(product)"
        >
          <div class="product-image">
            <img :src="product.imageUrl" :alt="product.name" />
            <div
              class="product-tags"
              v-if="product.tags && product.tags.length"
            >
              <el-tag
                v-for="tag in product.tags"
                :key="tag"
                size="mini"
                :type="tag.type"
              >
                {{ tag.name }}
              </el-tag>
            </div>
          </div>
          <div class="product-info">
            <h3 class="product-name">{{ product.name }}</h3>
            <p class="product-desc">{{ product.description }}</p>
            <div class="product-price">
              <span class="current-price">¥{{ product.price }}</span>
              <span class="original-price" v-if="product.originalPrice">
                ¥{{ product.originalPrice }}
              </span>
            </div>
            <div class="product-actions">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-shopping-cart-2"
                @click.stop="addToCart(product)"
              >
                加入购物车
              </el-button>
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-shopping-bag-1"
                @click.stop="buyNow(product)"
              >
                立即购买
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 商品列表 -->
    <div class="products-section">
      <div class="section-title">
        <h2>全部商品</h2>
        <div class="filter-actions">
          <el-select v-model="sortBy" placeholder="排序方式" size="small">
            <el-option label="默认排序" value="default"></el-option>
            <el-option label="价格从低到高" value="price-asc"></el-option>
            <el-option label="价格从高到低" value="price-desc"></el-option>
            <el-option label="销量优先" value="sales"></el-option>
          </el-select>
          <el-select
            v-model="selectedBrand"
            placeholder="选择品牌"
            size="small"
          >
            <el-option label="全部品牌" value=""></el-option>
            <el-option
              v-for="brand in brands"
              :key="brand"
              :label="brand"
              :value="brand"
            ></el-option>
          </el-select>
        </div>
      </div>

      <div class="products-list">
        <div
          v-for="product in filteredProducts"
          :key="product.id"
          class="product-item"
          @click="viewProduct(product)"
        >
          <div class="product-image">
            <img :src="product.imageUrl" :alt="product.name" />
          </div>
          <div class="product-details">
            <h3 class="product-name">{{ product.name }}</h3>
            <p class="product-desc">{{ product.description }}</p>
            <div class="product-meta">
              <span class="brand">{{ product.brand }}</span>
              <span class="sales">销量: {{ product.sales }}</span>
            </div>
            <div class="product-price">
              <span class="current-price">¥{{ product.price }}</span>
              <span class="original-price" v-if="product.originalPrice">
                ¥{{ product.originalPrice }}
              </span>
            </div>
            <div class="product-actions">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-shopping-cart-2"
                @click.stop="addToCart(product)"
              >
                加入购物车
              </el-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.pageNum"
          :page-sizes="[12, 24, 36, 48]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 购物车抽屉 -->
    <el-drawer
      title="购物车"
      :visible.sync="cartVisible"
      direction="rtl"
      size="400px"
    >
      <div class="cart-content">
        <div v-if="cartItems.length === 0" class="empty-cart">
          <i class="el-icon-shopping-cart-2"></i>
          <p>购物车是空的</p>
          <el-button type="primary" @click="cartVisible = false">
            去购物
          </el-button>
        </div>
        <div v-else>
          <div v-for="item in cartItems" :key="item.id" class="cart-item">
            <img :src="item.imageUrl" :alt="item.name" />
            <div class="item-info">
              <h4>{{ item.name }}</h4>
              <p class="price">¥{{ item.price }}</p>
              <div class="quantity-control">
                <el-input-number
                  v-model="item.quantity"
                  :min="1"
                  :max="99"
                  size="mini"
                  @change="updateCartItem(item)"
                ></el-input-number>
                <el-button
                  type="danger"
                  size="mini"
                  icon="el-icon-delete"
                  @click="removeFromCart(item)"
                ></el-button>
              </div>
            </div>
          </div>
          <div class="cart-footer">
            <div class="total">总计: ¥{{ cartTotal }}</div>
            <el-button type="primary" @click="checkout">
              结算 ({{ cartCount }})
            </el-button>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { listAdvertisement } from "@/api/admin/advertisement";

export default {
  name: "MobileShop",
  data() {
    return {
      // 搜索关键词
      searchKeyword: "",

      // 广告数据
      advertisements: [
        {
          id: 1,
          name: "新品上市",
          description: "最新款智能手机，限时优惠",
          imageUrl:
            "https://via.placeholder.com/800x200/FF6B6B/FFFFFF?text=新品上市",
          targetUrl: "/products/new",
        },
        {
          id: 2,
          name: "限时特价",
          description: "精选手机，价格优惠",
          imageUrl:
            "https://via.placeholder.com/800x200/4ECDC4/FFFFFF?text=限时特价",
          targetUrl: "/products/sale",
        },
        {
          id: 3,
          name: "品牌专区",
          description: "知名品牌，品质保证",
          imageUrl:
            "https://via.placeholder.com/800x200/45B7D1/FFFFFF?text=品牌专区",
          targetUrl: "/products/brands",
        },
      ],

      // 商品分类
      categories: [
        { id: 1, name: "智能手机", icon: "el-icon-mobile-phone" },
        { id: 2, name: "平板电脑", icon: "el-icon-tablet-1" },
        { id: 3, name: "智能手表", icon: "el-icon-watch-1" },
        { id: 4, name: "耳机音响", icon: "el-icon-headset" },
        { id: 5, name: "充电配件", icon: "el-icon-lightning" },
        { id: 6, name: "保护壳膜", icon: "el-icon-box" },
        { id: 7, name: "数据线", icon: "el-icon-connection" },
        { id: 8, name: "更多配件", icon: "el-icon-more" },
      ],

      // 热门商品
      hotProducts: [
        {
          id: 1,
          name: "iPhone 15 Pro",
          description: "A17 Pro芯片，钛金属设计",
          price: 7999,
          originalPrice: 8999,
          imageUrl:
            "https://via.placeholder.com/300x300/FF6B6B/FFFFFF?text=iPhone+15+Pro",
          brand: "Apple",
          sales: 1250,
          tags: [
            { name: "热销", type: "danger" },
            { name: "新品", type: "success" },
          ],
        },
        {
          id: 2,
          name: "Samsung Galaxy S24",
          description: "骁龙8 Gen 3，AI智能助手",
          price: 6999,
          originalPrice: 7999,
          imageUrl:
            "https://via.placeholder.com/300x300/4ECDC4/FFFFFF?text=Galaxy+S24",
          brand: "Samsung",
          sales: 980,
          tags: [{ name: "热销", type: "danger" }],
        },
        {
          id: 3,
          name: "Xiaomi 14 Ultra",
          description: "徕卡光学，专业摄影",
          price: 5999,
          originalPrice: 6499,
          imageUrl:
            "https://via.placeholder.com/300x300/45B7D1/FFFFFF?text=Xiaomi+14+Ultra",
          brand: "Xiaomi",
          sales: 1560,
          tags: [{ name: "限时", type: "warning" }],
        },
        {
          id: 4,
          name: "Huawei Mate 60 Pro",
          description: "麒麟芯片，卫星通信",
          price: 6999,
          originalPrice: 7999,
          imageUrl:
            "https://via.placeholder.com/300x300/96CEB4/FFFFFF?text=Mate+60+Pro",
          brand: "Huawei",
          sales: 2100,
          tags: [
            { name: "热销", type: "danger" },
            { name: "国产", type: "primary" },
          ],
        },
      ],

      // 全部商品
      allProducts: [
        {
          id: 1,
          name: "iPhone 15 Pro",
          description: "A17 Pro芯片，钛金属设计",
          price: 7999,
          originalPrice: 8999,
          imageUrl:
            "https://via.placeholder.com/300x300/FF6B6B/FFFFFF?text=iPhone+15+Pro",
          brand: "Apple",
          sales: 1250,
        },
        {
          id: 2,
          name: "Samsung Galaxy S24",
          description: "骁龙8 Gen 3，AI智能助手",
          price: 6999,
          originalPrice: 7999,
          imageUrl:
            "https://via.placeholder.com/300x300/4ECDC4/FFFFFF?text=Galaxy+S24",
          brand: "Samsung",
          sales: 980,
        },
        {
          id: 3,
          name: "Xiaomi 14 Ultra",
          description: "徕卡光学，专业摄影",
          price: 5999,
          originalPrice: 6499,
          imageUrl:
            "https://via.placeholder.com/300x300/45B7D1/FFFFFF?text=Xiaomi+14+Ultra",
          brand: "Xiaomi",
          sales: 1560,
        },
        {
          id: 4,
          name: "Huawei Mate 60 Pro",
          description: "麒麟芯片，卫星通信",
          price: 6999,
          originalPrice: 7999,
          imageUrl:
            "https://via.placeholder.com/300x300/96CEB4/FFFFFF?text=Mate+60+Pro",
          brand: "Huawei",
          sales: 2100,
        },
        {
          id: 5,
          name: "OPPO Find X7",
          description: "哈苏影像，超快充电",
          price: 5499,
          originalPrice: 5999,
          imageUrl:
            "https://via.placeholder.com/300x300/FFEAA7/000000?text=Find+X7",
          brand: "OPPO",
          sales: 890,
        },
        {
          id: 6,
          name: "vivo X100 Pro",
          description: "蔡司光学，V3芯片",
          price: 5999,
          originalPrice: 6499,
          imageUrl:
            "https://via.placeholder.com/300x300/DDA0DD/FFFFFF?text=X100+Pro",
          brand: "vivo",
          sales: 1120,
        },
      ],

      // 筛选和排序
      sortBy: "default",
      selectedBrand: "",
      brands: ["Apple", "Samsung", "Xiaomi", "Huawei", "OPPO", "vivo"],

      // 分页
      pagination: {
        pageNum: 1,
        pageSize: 12,
        total: 0,
      },

      // 购物车
      cartVisible: false,
      cartItems: [],

      // 加载状态
      loading: false,
    };
  },

  computed: {
    // 过滤后的商品列表
    filteredProducts() {
      let products = [...this.allProducts];

      // 品牌筛选
      if (this.selectedBrand) {
        products = products.filter((p) => p.brand === this.selectedBrand);
      }

      // 排序
      switch (this.sortBy) {
        case "price-asc":
          products.sort((a, b) => a.price - b.price);
          break;
        case "price-desc":
          products.sort((a, b) => b.price - a.price);
          break;
        case "sales":
          products.sort((a, b) => b.sales - a.sales);
          break;
        default:
          break;
      }

      // 更新总数
      this.pagination.total = products.length;

      // 分页
      const start = (this.pagination.pageNum - 1) * this.pagination.pageSize;
      const end = start + this.pagination.pageSize;
      return products.slice(start, end);
    },

    // 购物车商品数量
    cartCount() {
      return this.cartItems.reduce((total, item) => total + item.quantity, 0);
    },

    // 购物车总价
    cartTotal() {
      return this.cartItems.reduce(
        (total, item) => total + item.price * item.quantity,
        0
      );
    },
  },

  created() {
    this.loadAdvertisements();
    this.pagination.total = this.allProducts.length;
  },

  methods: {
    // 加载广告数据
    async loadAdvertisements() {
      try {
        const response = await listAdvertisement({ pageSize: 10 });
        if (response.rows && response.rows.length > 0) {
          this.advertisements = response.rows.map((ad) => ({
            ...ad,
            imageUrl:
              ad.imageUrl ||
              `https://via.placeholder.com/800x200/FF6B6B/FFFFFF?text=${ad.name}`,
          }));
        }
      } catch (error) {
        console.error("加载广告失败:", error);
      }
    },

    // 搜索
    handleSearch() {
      this.$message.info(`搜索: ${this.searchKeyword}`);
      // 这里可以实现搜索逻辑
    },

    // 广告点击
    handleAdClick(ad) {
      this.$message.info(`点击广告: ${ad.name}`);
      // 这里可以实现广告跳转逻辑
    },

    // 选择分类
    selectCategory(category) {
      this.$message.info(`选择分类: ${category.name}`);
      // 这里可以实现分类筛选逻辑
    },

    // 查看更多
    viewMore() {
      this.$message.info("查看更多商品");
      // 这里可以实现查看更多逻辑
    },

    // 查看商品详情
    viewProduct(product) {
      this.$message.info(`查看商品: ${product.name}`);
      // 这里可以实现商品详情页面跳转
    },

    // 加入购物车
    addToCart(product) {
      const existingItem = this.cartItems.find(
        (item) => item.id === product.id
      );
      if (existingItem) {
        existingItem.quantity += 1;
      } else {
        this.cartItems.push({
          ...product,
          quantity: 1,
        });
      }
      this.$message.success("已加入购物车");
    },

    // 立即购买
    buyNow(product) {
      this.$message.info(`立即购买: ${product.name}`);
      // 这里可以实现立即购买逻辑
    },

    // 显示购物车
    showCart() {
      this.cartVisible = true;
    },

    // 显示用户中心
    showUserCenter() {
      this.$message.info("用户中心");
      // 这里可以实现用户中心跳转
    },

    // 更新购物车商品数量
    updateCartItem(item) {
      this.$message.info(`更新商品数量: ${item.name} x${item.quantity}`);
    },

    // 从购物车移除
    removeFromCart(item) {
      const index = this.cartItems.findIndex(
        (cartItem) => cartItem.id === item.id
      );
      if (index > -1) {
        this.cartItems.splice(index, 1);
        this.$message.success("已从购物车移除");
      }
    },

    // 结算
    checkout() {
      this.$message.info(
        `结算 ${this.cartCount} 件商品，总计 ¥${this.cartTotal}`
      );
      // 这里可以实现结算逻辑
    },

    // 分页大小改变
    handleSizeChange(size) {
      this.pagination.pageSize = size;
      this.pagination.pageNum = 1;
    },

    // 当前页改变
    handleCurrentChange(page) {
      this.pagination.pageNum = page;
    },
  },
};
</script>

<style scoped>
.mobile-shop-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 顶部导航栏 */
.shop-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 15px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.logo {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
}

.logo i {
  margin-right: 10px;
  font-size: 28px;
}

.search-box {
  flex: 1;
  max-width: 400px;
  margin: 0 20px;
}

.user-actions {
  display: flex;
  gap: 15px;
}

.user-actions .el-button {
  color: white;
  font-size: 14px;
}

.cart-badge {
  margin-left: 5px;
}

/* 广告轮播 */
.advertisement-section {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
}

.ad-item {
  position: relative;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.ad-item:hover {
  transform: scale(1.02);
}

.ad-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ad-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  padding: 20px;
}

.ad-overlay h3 {
  margin: 0 0 5px 0;
  font-size: 18px;
}

.ad-overlay p {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}

/* 商品分类 */
.category-section {
  max-width: 1200px;
  margin: 30px auto;
  padding: 0 20px;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-title h2 {
  margin: 0;
  color: #333;
  font-size: 24px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 20px;
}

.category-item {
  background: white;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.category-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.category-icon {
  font-size: 32px;
  color: #667eea;
  margin-bottom: 10px;
}

.category-name {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

/* 热门商品 */
.hot-products-section {
  max-width: 1200px;
  margin: 30px auto;
  padding: 0 20px;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.product-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.product-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-card:hover .product-image img {
  transform: scale(1.05);
}

.product-tags {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 5px;
}

.product-info {
  padding: 15px;
}

.product-name {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #333;
  font-weight: 600;
}

.product-desc {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

.product-price {
  margin-bottom: 15px;
}

.current-price {
  font-size: 18px;
  color: #e74c3c;
  font-weight: bold;
}

.original-price {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
  margin-left: 8px;
}

.product-actions {
  display: flex;
  gap: 10px;
}

/* 商品列表 */
.products-section {
  max-width: 1200px;
  margin: 30px auto;
  padding: 0 20px;
}

.filter-actions {
  display: flex;
  gap: 15px;
}

.products-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.product-item {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
}

.product-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.product-item .product-image {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.product-details {
  flex: 1;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.brand {
  color: #667eea;
  font-weight: 500;
}

.sales {
  color: #999;
  font-size: 12px;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

/* 购物车抽屉 */
.cart-content {
  padding: 20px;
}

.empty-cart {
  text-align: center;
  padding: 40px 20px;
}

.empty-cart i {
  font-size: 48px;
  color: #ddd;
  margin-bottom: 20px;
}

.empty-cart p {
  color: #999;
  margin-bottom: 20px;
}

.cart-item {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.cart-item img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 15px;
}

.item-info {
  flex: 1;
}

.item-info h4 {
  margin: 0 0 5px 0;
  font-size: 14px;
}

.price {
  color: #e74c3c;
  font-weight: bold;
  margin-bottom: 10px;
}

.quantity-control {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cart-footer {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.total {
  font-size: 18px;
  font-weight: bold;
  color: #e74c3c;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 15px;
  }

  .search-box {
    max-width: 100%;
    margin: 0;
  }

  .category-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .products-grid {
    grid-template-columns: 1fr;
  }

  .products-list {
    grid-template-columns: 1fr;
  }

  .product-item {
    flex-direction: column;
  }

  .product-item .product-image {
    width: 100%;
    height: 200px;
  }
}
</style> 